@layout("/common/_container.html"){
<style>
    .searchbox {
        margin: 10px 10px 0 20px;
    }
    .tables {
        margin: 0 20px;
    }
    .el-textarea__inner{
        resize: none !important;
    }
</style>
</head>

<body>
    <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
    <script src="/assets/common/module/vuejs/vue.dev.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/assets/common/module/element-ui/lib-master/theme-chalk/index.css">
    <link rel="stylesheet" href="/assets/common/module/element-ui/lib-master/theme-chalk/display.css">
    <link rel="stylesheet" href="/assets/common/css/beautiful.css">
    <!-- 引入组件库 -->
    <script src="/assets/common/module/element-ui/lib-master/index.js"></script>

    <div id="app">
        <div class="searchbox">
            <el-form :inline="true" label-position="left"  :model="form" class="demo-form-inline" label-width="90px">
                <el-form-item :style="formItemStyle" label="营运经理:">
                    <el-select v-model="form.operationManagerTel" filterable size="small" v-on:change="changeManager"
                        placeholder="请选择营运经理" style="width: 200px">
                        <el-option v-for="(item,index) in managerData" :key="index" :label="item.yyjl"
                            :value="item.yydh">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :style="formItemStyle" label="督导:">
                    <el-select v-model="form.supervisorTel" filterable size="small" v-on:change="changeSupervisor"
                        placeholder="请选择督导" style="width: 200px">
                        <el-option v-for="(item,index) in supervisorData" :key="index" :label="item.dd"
                            :value="item.dddh">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :style="formItemStyle" label="店名:">
                    <el-select v-model="form.storeName" filterable size="small"  v-on:change="changeStore"
                        placeholder="请选择店名" style="width: 200px">
                        <el-option v-for="(item,index) in storeData" :key="index" :label="item.dm" :value="item.dm">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :style="formItemStyle" label="员工姓名/ID:">
                    <el-select v-model="form.empNameOrBh" filterable size="small"
                               placeholder="请选择员工姓名/ID" style="width: 200px">
                        <el-option v-for="(item,index) in empData" :key="index" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :style="formItemStyle" label="审核状态:">
                    <el-select v-model="form.auditStatus" filterable size="small"
                               placeholder="" style="width: 200px">
                        <el-option value="" label="全部"></el-option>
                        <el-option value="2" label="待审核"></el-option>
                        <el-option value="3" label="已通过"></el-option>
                        <el-option value="4" label="已驳回"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :style="formItemStyle" label="申请月份:">
                    <el-date-picker size="small" type="month" v-model="form.applicationMonth" clearable style="width: 200px"
                                    placeholder="选择日期" value-format="yyyy-MM" format="yyyy-MM" />
                </el-form-item>
                <el-form-item :style="formItemStyle" label=" ">
                    <el-button type="primary" class="btybtn" size="small" v-on:click="searchDo">搜索</el-button>
                    <el-button size="small" v-on:click="resetDo" style="margin-right: 10px;">重置</el-button>
                    <el-button type="primary" class="btybtn" size="small" v-on:click="manyChangeList">半年内涨薪2次及2次以上</el-button>
                    <el-button type="primary" class="btybtn" size="small" v-on:click="batchAudit">批量通过</el-button>
                    <el-button type="primary" class="btybtn" size="small" v-on:click="exportDo">导出</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="tables">
            <el-table v-loading="loading" :data="tableData" highlight-current-row
                :cell-style="{fontSize:'14px'}"
                :header-cell-style="headerStyle"  
                border style="width: 100%;" 
                size="small"
                v-on:selection-change="handleSelectionChange" 
                :height="tableHeight">
                <el-table-column type="selection" width="40">
                </el-table-column>
                <el-table-column prop="" label="序号" align="center" width="50">
                    <template scope="scope">
                        <span>{{(pageIndex - 1) * pagesize + scope.$index + 1}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="storeName" label="店名" width="190"></el-table-column>
                <el-table-column prop="yaoma" label="妖码" width="80"></el-table-column>
                <el-table-column prop="operationManager" label="营运经理" width="75"></el-table-column>
                <el-table-column prop="supervisor" label="督导" width="75"></el-table-column>
                <el-table-column prop="bigStoreManager" label="大店长" width="75"></el-table-column>
                <el-table-column prop="storeManager" label="店长" width="75"></el-table-column>
                <el-table-column prop="empName" label="员工姓名" width="75"></el-table-column>
                <el-table-column prop="empBh" label="员工ID" width="180"></el-table-column>
                <el-table-column prop="baseWage" label="涨薪前基本工资" width="110"></el-table-column>
                <el-table-column prop="postWage" label="涨薪前岗位工资" width="110"></el-table-column>
                <el-table-column prop="changePostWage" label="涨(降)薪后岗位工资" width="130"></el-table-column>
                <el-table-column prop="createTime" label="申请时间" width="160"></el-table-column>
                <el-table-column prop="personnelAuditStatus" label="审核状态" width="75" :formatter="auditStatusFormat"></el-table-column>
                <el-table-column fixed="right" label="操作" width="150">
                    <template slot-scope="scope" v-if="scope.row.personnelAuditStatus == '2'">
                        <el-button  v-on:click="auditClick(scope.row)" type="primary" size="small">通过</el-button>
                        <el-button  v-on:click="auditRejectClick(scope.row)" type="danger" size="small">驳回</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pages">
                <el-pagination background layout="sizes, prev, pager, next" v-on:size-change="handleSizeChange"
                    v-on:current-change="handleCurrentChange" :total="total" :page-sizes="[20, 30, 40, 50]"
                    :page-size="pagesize">
                </el-pagination>
            </div>
        </div>
        <el-dialog title="驳回" :visible.sync="dialogVisible" width="30%">
            <div>
                <el-input
                    type="textarea"
                    class="textarea"
                    :rows="4"
                    placeholder="请输入驳回原因"
                    v-model="rejectReason">
                </el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" v-on:click="dialogVisible = false">取消</el-button>
                <el-button size="small" type="primary" v-on:click="rejectConfirm('4')">确定</el-button>
            </span>
        </el-dialog>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                labelCol: { style: { width: '180px' } },
                formItemStyle: {
                    marginBottom: 0
                },
                tableData: [],
                pageIndex: 1,//当前页码
                pagesize: 20,//每页数量
                total: 0,//总条数
                dialogVisible: false,//驳回框是否显示
                form2Visible: false,
                loading: false,//表格是否加载,
                managerData: [],//营运经理数据
                supervisorData: [],//督导数据
                storeData: [],//店名数据
                empData: [],//姓名数据
                selectData: [],//复选框选中的数据
                form: {
                    operationManagerTel: '',
                    supervisorTel: '',//店名妖码
                    storeName: '',
                    empNameOrBh: '',
                    auditStatus: '',
                    applicationMonth: '',
                    manyChangeFlag: ''
                },
                rejectReason: '',
                btySalaryChangeId: '',
                headerStyle:{color:'#0E2231',fontWeight:'blod',background:'#F7F5FA'},
                tableHeight:0
            },
            created() {
                //获取页面数据
                this.getListData();
                //获取营运经理
                this.getManagers();
                //自适应高度
                this.getHeight();
            },
            mounted() { },
            methods: {
                getHeight(){
                    const {form2Visible} = this
                    let ava = document.documentElement.clientHeight
                    let height = ava - 214
                    if(form2Visible){
                        height = height - 51
                    }
                    this.tableHeight = height
                },
                /**
                 * 获取列表数据
                 */
                getListData() {
                    this.loading = true;
                    let { operationManagerTel, supervisorTel, storeName, empNameOrBh, auditStatus, applicationMonth, manyChangeFlag} = this.form;
                    let { pageIndex, pagesize } = this;
                    let formData = new FormData();
                    formData.append("page", pageIndex);
                    formData.append("limit", pagesize);
                    formData.append("operationManagerTel", operationManagerTel);
                    formData.append("supervisorTel", supervisorTel);
                    formData.append("storeName", (storeName == '请选择' ? '' : storeName));
                    formData.append("empNameOrBh", (empNameOrBh == '请选择' ? '' : empNameOrBh));
                    formData.append("auditStatus", auditStatus);
                    formData.append("applicationMonth", applicationMonth);
                    formData.append("manyChangeFlag", manyChangeFlag);
                    const requestOptions = {
                        method: "POST",
                        body: formData
                    };
                    fetch("/btySalaryChange/getSalaryChangePage", requestOptions)
                        .then(response => response.json())
                        .then(res => {
                            if (res.code == 0) {
                                this.total = res.count
                                this.tableData = res.data
                                this.loading = false
                            } else {
                                this.loading = false
                            }
                        })
                },
                /**
                 * 选择框事件
                 */
                handleSelectionChange(val) {
                    this.selectData = val;
                },
                /**
                 * 搜索内容
                 */
                searchDo() {
                    this.pageIndex = 1;
                    this.form.manyChangeFlag = '';
                    this.getListData();
                },
                /**
                 * 重置搜索条件
                 */
                resetDo() {
                    this.form = {
                        operationManagerTel : '',
                        supervisorTel : '',
                        storeName : '',
                        empNameOrBh : '',
                        auditStatus : '',
                        applicationMonth : '',
                        manyChangeFlag: ''
                    }
                    this.supervisorData = [];
                    this.storeData = [];
                    this.empData = [];
                    this.pageIndex = 1;
                    setTimeout(() => {
                        this.getListData();
                    }, 0);
                },
                /**
                 * 每页记录数
                 */
                handleSizeChange(val) {
                    this.pagesize = val;
                    this.getListData();
                },
                /**
                 * 页码改变
                 */
                handleCurrentChange(val) {
                    this.pageIndex = val;
                    this.getListData();
                },
                /**
                 * 通过操作
                 */
                auditClick(row){
                    this.btySalaryChangeId = row.btySalaryChangeId;
                    this.rejectConfirm('3');
                },
                /**
                 * 驳回操作
                 */
                auditRejectClick(row){
                    this.btySalaryChangeId = row.btySalaryChangeId;
                    this.dialogVisible = true;
                },
                /**
                 * 修改申请单的审核状态
                 */
                rejectConfirm(type){
                    let idList = new Array();
                    idList.push(this.btySalaryChangeId);
                    let formData = new FormData();
                    formData.append("idList", idList);
                    formData.append("auditStatus", type);
                    formData.append("rejectReason", this.rejectReason);
                    const requestOptions = {
                        method: "POST",
                        body: formData
                    };
                    fetch("/btySalaryChange/batchAudit", requestOptions)
                        .then(response => response.json())
                        .then(res => {
                            if (res.code == 200) {
                                this.$message({
                                    message: '操作成功',
                                    type: 'success'
                                });
                            } else {
                                this.$message({
                                    message: res.message,
                                    type: 'error'
                                });
                            }
                            this.dialogVisible = false;
                            this.getListData();
                        })
                },
                /**
                 * 半年内涨薪2次及2次以上按钮
                 */
                manyChangeList(){
                    this.form.manyChangeFlag = '1';
                    this.getListData();
                },
                /**
                 * 批量审核通过
                 */
                batchAudit(){
                    if(this.selectData == null || this.selectData.length == 0){
                        this.$message({
                            message: '请选择要通过的数据',
                            type: 'warning'
                        });
                        return;
                    }
                    var ids = [];
                    //获取所有选中行的id组成的字符串，以逗号分隔
                    for(let i = 0; i < this.selectData.length; i++){
                        if(this.selectData[i].personnelAuditStatus == '3' || this.selectData[i].personnelAuditStatus == '4'){
                            this.$message({
                                message: '存在已审核过的数据，请取消',
                                type: 'warning'
                            });
                            return;
                        }
                        ids.push(this.selectData[i].btySalaryChangeId);
                    }
                    let formData = new FormData();
                    formData.append("idList", ids);
                    formData.append("auditStatus", '3');
                    const requestOptions = {
                        method: "POST",
                        body: formData
                    };
                    fetch("/btySalaryChange/batchAudit", requestOptions)
                        .then(response => response.json())
                        .then(res => {
                            if (res.code == 200) {
                                this.$message({
                                    message: '操作成功',
                                    type: 'success'
                                });
                            } else {
                                this.$message({
                                    message: res.message,
                                    type: 'error'
                                });
                            }
                            this.getListData();
                        })
                },
                /**
                 * 获取营运经理数据
                 */
                getManagers() {
                    let formData = new FormData();
                    const requestOptions = {
                        method: "POST",
                        body: formData
                    };
                    fetch("/btySalaryChange/getOperationManagerList", requestOptions)
                        .then(response => response.json())
                        .then(res => {
                            if (res.code == 200) {
                                this.managerData = [{ yyjl: "请选择", yydh: "" }, ...res.data];
                            }
                        })
                },
                /**
                 * 获取督导数据
                 */
                getSupervisors() {
                    let formData = new FormData();
                    formData.append("operationManagerTel", this.form.operationManagerTel);
                    const requestOptions = {
                        method: "POST",
                        body: formData
                    };
                    fetch("/btySalaryChange/getSupervisorList", requestOptions)
                        .then(response => response.json())
                        .then(res => {
                            if (res.code == 200) {
                                this.supervisorData = [{ dd: "请选择", dddh: "" }, ...res.data]
                            }
                        })
                },
                /**
                 * 获取店名数据
                 */
                getStores() {
                    let formData = new FormData();
                    formData.append("operationManagerTel", this.form.operationManagerTel);
                    formData.append("supervisorTel", this.form.supervisorTel);
                    const requestOptions = {
                        method: "POST",
                        body: formData
                    };
                    fetch("/btySalaryChange/getStoreList", requestOptions)
                        .then(response => response.json())
                        .then(res => {
                            if (res.code == 200) {
                                this.storeData = [{ dm: "请选择" }, ...res.data]
                            }
                        })
                },
                /**
                 * 获取员工数据
                 */
                getEmpList() {
                    let formData = new FormData();
                    formData.append("storeName", this.form.storeName);
                    const requestOptions = {
                        method: "POST",
                        body: formData
                    };
                    fetch("/btySalaryChange/getEmpListByStoreName", requestOptions)
                        .then(response => response.json())
                        .then(res => {
                            if (res.code == 200) {
                                this.empData = ["请选择", ...res.data]
                            }
                        })
                },
                /**
                 * 营运经理改变
                 */
                changeManager() {
                    this.getSupervisors();
                    this.$set(this.form, "supervisorTel", "");
                    this.$set(this.form, "storeName", "");
                    this.$set(this.form, "empNameOrBh", "");
                },
                /**
                 * 督导改变
                 */
                changeSupervisor() {
                    this.getStores();
                    this.$set(this.form, "storeName", "");
                    this.$set(this.form, "empNameOrBh", "");
                },
                /**
                 * 店名改变
                 */
                changeStore() {
                    this.getEmpList();
                    this.$set(this.form, "empNameOrBh", "");
                },
                /**
                 * 条件导出
                 */
                exportDo() {
                    let { operationManagerTel, supervisorTel, storeName, empNameOrBh, auditStatus, applicationMonth, manyChangeFlag} = this.form;
                    const loading = this.$loading({
                        lock: true,
                        text: 'Loading',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });

                    window.location.href = "/btySalaryChange/EmpSalaryChangeDataExport?operationManagerTel="
                        + operationManagerTel + "&supervisorTel=" + supervisorTel + "&storeName=" + storeName + "&empNameOrBh=" + empNameOrBh
                        + "&auditStatus=" + auditStatus + "&applicationMonth=" + applicationMonth;
                    setTimeout(() => {
                        loading.close();
                    }, 1500);
                },
                /**
                 * 转换审核状态
                 */
                auditStatusFormat(row){
                    if(row.personnelAuditStatus == '3'){
                        return '已通过';
                    }else if(row.personnelAuditStatus == '4'){
                        return '已驳回';
                    }else{
                        return '待审核';
                    }
                },
            }
        })
    </script>
</body>
@}